<template>
    <div id="total">
        <!-- 头部 -->
        <div class="title">
            <span>服务管理</span>
        </div>

        <!-- 搜索 -->
        <div id="headerBox" v-show="tagIndex === 0">
            <el-input placeholder="请输入项目名称" v-model="input" clearable prefix-icon="el-icon-search"></el-input>
            <el-button type="primary" plain id="serviceSearch" @click="serviceSearch">查询</el-button>
            <el-button type="primary" plain @click="goServiceAdd">新增项目</el-button>
        </div>

        <!-- 标签页 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first">
                <div v-if="tagIndex === 0">
                    <!-- 上架下架按钮 -->
                    <div class="shelves">
                        <el-button type="success" plain @click="shelfProject">上架</el-button>
                        <el-button type="danger" plain @click="downProject">下架</el-button>
                    </div>

                    <!-- 表格 -->
                    <el-table
                        ref="multipleTable"
                        border
                        :data="showTableData"
                        tooltip-effect="light"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        height="427"
                    >
                        <!-- 全选 -->
                        <el-table-column type="selection" width="55"></el-table-column>

                        <el-table-column prop="id" label="项目编码"></el-table-column>

                        <el-table-column label="项目主图">
                            <template slot-scope="scope">
                                <img :src="addressHttp + '/'+ scope.row.picture" id="img" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="name" label="项目名称"></el-table-column>
                        <el-table-column prop="time" label="项目时长"></el-table-column>
                        <el-table-column prop="price" label="项目金额"></el-table-column>
                        <el-table-column prop="state" label="项目状态" :formatter="formatter"></el-table-column>

                        <el-table-column label="操作">
                            <!-- slot-scope="scope" 拿渲染这一行的数据 -->
                            <template slot-scope="scope">
                                <el-button type="info" plain @click="goServiceDetail(scope.row)">详情</el-button>
                                <el-button type="success" plain @click="goServiceEdit(scope.row)">编辑</el-button>
                                <el-button type="danger" plain @click="delService(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                    ></el-pagination>
                </div>
            </el-tab-pane>

            <el-tab-pane label="上架中" name="second">
                <div v-if="tagIndex === 1">
                    <!-- 上架下架按钮 -->
                    <div class="shelves">
                        <el-button type="success" plain disabled>上架</el-button>
                        <el-button type="danger" plain @click="downProject">下架</el-button>
                    </div>

                    <!-- 表格 -->
                    <el-table
                        ref="multipleTable"
                        border
                        :data="showTableData"
                        tooltip-effect="light"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        height="427"
                    >
                        <!-- 全选 -->
                        <el-table-column type="selection" width="55"></el-table-column>

                        <el-table-column prop="id" label="项目编码"></el-table-column>

                        <el-table-column label="项目主图">
                            <template slot-scope="scope">
                                <img :src=" addressHttp + '/'+ scope.row.picture" id="img" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="name" label="项目名称"></el-table-column>
                        <el-table-column prop="time" label="项目时长"></el-table-column>
                        <el-table-column prop="price" label="项目金额"></el-table-column>
                        <el-table-column prop="state" label="项目状态" :formatter="formatter"></el-table-column>

                        <el-table-column label="操作">
                            <!-- slot-scope="scope" 拿渲染这一行的数据 -->
                            <template slot-scope="scope">
                                <el-button type="info" plain @click="goServiceDetail(scope.row)">详情</el-button>
                                <el-button type="success" plain @click="goServiceEdit(scope.row)">编辑</el-button>
                                <el-button type="danger" plain @click="delService(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                    ></el-pagination>
                </div>
            </el-tab-pane>

            <el-tab-pane label="未上架" name="third">
                <div v-if="tagIndex === 2">
                    <!-- 上架下架按钮 -->
                    <div class="shelves">
                        <el-button type="success" plain @click="shelfProject">上架</el-button>
                        <el-button type="danger" plain disabled>下架</el-button>
                    </div>

                    <!-- 表格 -->
                    <el-table
                        ref="multipleTable"
                        border
                        :data="showTableData"
                        tooltip-effect="light"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        height="427"
                    >
                        <!-- 全选 -->
                        <el-table-column type="selection" width="55"></el-table-column>

                        <el-table-column prop="id" label="项目编码"></el-table-column>

                        <el-table-column label="项目主图">
                            <template slot-scope="scope">
                                <img :src=" addressHttp + '/'+  scope.row.picture" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="name" label="项目名称"></el-table-column>
                        <el-table-column prop="time" label="项目时长"></el-table-column>
                        <el-table-column prop="price" label="项目金额"></el-table-column>
                        <el-table-column prop="state" label="项目状态" :formatter="formatter"></el-table-column>

                        <el-table-column label="操作">
                            <!-- slot-scope="scope" 拿渲染这一行的数据 -->
                            <template slot-scope="scope">
                                <el-button type="info" plain @click="goServiceDetail(scope.row)">详情</el-button>
                                <el-button type="success" plain @click="goServiceEdit(scope.row)">编辑</el-button>
                                <el-button type="danger" plain @click="delService(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                    ></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>

        <!-- 详情弹出框 -->
        <el-dialog title="项目详情" :visible.sync="dialogVisible" width="35%" id="serviceDetail">
            <el-form :model="serviceDetail" label-width="80px">
                <el-form-item label="项目名称">{{serviceDetail.name}}</el-form-item>
                <el-form-item label="项目价格">{{serviceDetail.price}}</el-form-item>
                <el-form-item label="项目时长">{{serviceDetail.time}}</el-form-item>
                <el-form-item label="项目简介">{{serviceDetail.describe}}</el-form-item>
                <el-form-item label="项目图片">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="addressHttp+'/'+serviceDetail.picture"
                        :preview-src-list="srcList"
                    ></el-image>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from "qs";
export default {
    name: "Service",
    data() {
        return {
            addressHttp: "http://172.16.113.23:8080" /* 图片服务器地址*/,
            activeName: "first" /* 标签页默认激活第一个 */,
            input: "" /* 查询输入 */,
            tableData: [] /* 表格渲染的数据 */,
            multipleSelection: [] /* 存放勾选多选项的数据 */,
            currentPage: 1 /* 当前页 */,
            pageSize: 5 /* 每一页的条数 */,
            tagIndex: 0 /* 装点击标签页的下标 0表示全部 1 表示上架中 2表示未上架 */,
            srcList: [] /* 预览图数组 */,
            dialogVisible: false /* 详情弹框 */,
            serviceDetail: {} /* 存放项目详情渲染的数据 */,
        };
    },
    methods: {
        // 点击标签页
        handleClick(tab) {
            console.log(tab);
            this.tagIndex = Number(tab.index); /* 将点击的下标赋值 */
            this.multipleSelection = [];
            this.currentPage = 1; /* 改变标签的时候将当前页和分页数归回 */
            this.pageSize = 5;
            console.log("改变啦,当前下标", this.tagIndex);
            if (this.tagIndex === 0) {
                // 发送获取全部项目请求
                // console.log('0',this.tagIndex);
                this.getAllProject();
            } else if (this.tagIndex === 1) {
                // 发送获取上架中请求
                // console.log('1',this.tagIndex);
                this.getShelfProject();
            } else if (this.tagIndex === 2) {
                // 发送获取未上架项目请求
                console.log("2", this.tagIndex);
                this.getDownProject();
            }
        },
        // 将选择的项存起来
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = []; /* 每次选择时先将数组置空 */
            val.forEach((item, index) => {
                this.multipleSelection.push(item.id);
            });
            console.log("选择的id", this.multipleSelection);
        },

        // 每页多少条数据被改变的时候触发的函数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
        },

        // 当前页改变的时候触发的函数
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },

        // 格式化要渲染的项目状态
        formatter(row, column) {
            return row.state == 0 ? "未上架" : "上架中";
        },

        // 点击详情弹出详情弹框
        goServiceDetail(row) {
            // this.$router.push({ name: "serviceDetail", params: row });
            this.dialogVisible = true;

            // 发起请求
            this.$axios({
                url: this.addressHttp + "/project/selectdetailProject",
                method: "get",
                params: {
                    id: row.id,
                },
            })
                .then((res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.serviceDetail = { ...res.data };
                        this.srcList.push(
                            this.addressHttp + "/" + res.data.picture
                        );
                        console.log("预览图片", this.srcList);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 点击新增跳转到新增页面
        goServiceAdd() {
            this.$router.push({ name: "serviceAdd" });
        },

        // 点击编辑跳转编辑页面
        goServiceEdit(row) {
            this.$router.push({ name: "serviceEdit", params: row });
        },

        // 获取所有项目数据用以渲染表格
        getAllProject() {
            this.$axios({
                url: this.addressHttp + "/project/selectAllPro",
                method: "get",
            })
                .then((res) => {
                    // console.log(res);
                    if (res.code === 200) {
                        this.tableData = [...res.data];
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 获取上架中项目请求
        getShelfProject() {
            this.$axios({
                url: this.addressHttp + "/project/selectupProject",
                method: "get",
            })
                .then((res) => {
                    // console.log("获取上架中项目请求", res);
                    if (res.code === 200) {
                        this.tableData = [...res.data];
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 获取下架中项目请求
        getDownProject() {
            this.$axios({
                url: this.addressHttp + "/project/selectdownProject",
                method: "get",
            })
                .then((res) => {
                    // console.log("获取下架中项目请求", res);
                    if (res.code === 200) {
                        this.tableData = [...res.data];
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 点击删除
        delService(row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    console.log("当前项id值", row.id);
                    // 发送请求
                    this.$axios({
                        method: "post",
                        url: this.addressHttp + "/project/delpro",
                        data: row.id,
                        headers: {
                            "Content-Type": "application/json",
                        },
                    })
                        .then((res) => {
                            console.log(res);
                            if (res.code === 200) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!",
                                });
                                // 重新渲染表格
                                if (this.tagIndex === 0) {
                                    this.getAllProject();
                                } else if (this.tagIndex === 1) {
                                    this.getShelfProject();
                                } else if (this.tagIndex === 2) {
                                    this.getDownProject();
                                }
                                this.currentPage = 1;
                            } else {
                                this.$message({
                                    type: "error",
                                    message: "删除失败!",
                                });
                            }
                        })
                        .catch((err) => {
                            console.log("错误了", err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        // 点击上架
        shelfProject() {
            if (this.multipleSelection == false) {
                this.$message({
                    message: "请选择要操作的项目！",
                    type: "warning",
                });
            } else {
                this.$confirm("确认将所选服务上架吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        // 发送请求
                        this.$axios({
                            method: "post",
                            url: this.addressHttp + "/project/updateMoreState1",
                            data: this.multipleSelection,
                            headers: {
                                "Content-Type": "application/json",
                            },
                        })
                            .then((res) => {
                                console.log(res);
                                if (res.code === 200) {
                                    this.$message({
                                        type: "success",
                                        message: "上架成功!",
                                    });

                                    // 重新渲染表格
                                    if (this.tagIndex === 0) {
                                        this.getAllProject();
                                    } else if (this.tagIndex === 1) {
                                        this.getShelfProject();
                                    } else if (this.tagIndex === 2) {
                                        this.getDownProject();
                                    }
                                    this.currentPage = 1;

                                    this.multipleSelection =
                                        []; /* 将所选置空 */
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: "上架失败!",
                                    });
                                }
                            })
                            .catch((err) => {
                                console.log("错误了", err);
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消操作",
                        });
                    });
            }
        },

        // 点击下架
        downProject() {
            if (this.multipleSelection == false) {
                this.$message({
                    message: "请选择要操作的项目！",
                    type: "warning",
                });
            } else {
                this.$confirm("确认将所选服务下架吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        // 发送请求
                        this.$axios({
                            method: "post",
                            url: this.addressHttp + "/project/updateMoreState0",
                            data: this.multipleSelection,
                            headers: {
                                "Content-Type": "application/json",
                            },
                        })
                            .then((res) => {
                                console.log(res);
                                if (res.code === 200) {
                                    this.$message({
                                        type: "success",
                                        message: "下架成功!",
                                    });

                                    // 重新渲染表格
                                    if (this.tagIndex === 0) {
                                        this.getAllProject();
                                    } else if (this.tagIndex === 1) {
                                        this.getShelfProject();
                                    } else if (this.tagIndex === 2) {
                                        this.getDownProject();
                                    }
                                    this.currentPage = 1;

                                    this.multipleSelection =
                                        []; /* 将所选置空 */
                                } else {
                                    this.$message({
                                        type: "error",
                                        message: "下架失败!",
                                    });
                                }
                            })
                            .catch((err) => {
                                console.log("错误了", err);
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            }
        },

        // 点击查询
        serviceSearch(){
            console.log("查询的值",this.input);
             // 发起请求
                    this.$axios({
                        url: this.addressHttp + "/project/doorselectProject",
                        method: "get",
                        params: {
                           name:this.input
                        },
                        
                    })
                        .then((res) => {
                            console.log(res);
                            if (res.code === 200) {
                                this.$message({
                                    type: "success",
                                    message: "查询成功!",
                                });
                                this.tableData = [...res.data];
                                this.input = ''
                            } else {
                                this.$message({
                                    type: "error",
                                    message: "查询失败!",
                                });
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });

        }
    },
    mounted() {
        this.getAllProject();
    },
    computed: {
        // 展示在表格里面的数据
        showTableData() {
            let start = (this.currentPage - 1) * this.pageSize;
            let end = start + this.pageSize;
            let data = this.tableData.slice(start, end);
            return data;
        }, 
    },
    watch: {},
};
</script>

<style scoped lang="less">
#total {
    position: relative;

    // 头部样式
    .title {
        width: 70px;
        height: 20px;
        padding-left: 10px;
        border-left: 4px solid #0082cc;
        font-size: 14px;
    }

    //标签
    .el-tabs {
        margin-top: 20px;
        width: 99%;
        margin: 20px auto auto auto;
        // 上架下架
        .shelves {
            padding-top: 5px;
            .el-button {
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 15px;
                font-size: 13px;
                padding: 0;
            }
        }

        // 标签样式
        /deep/.el-tabs__nav {
            left: 20px;
        }

        /deep/.el-tabs__item {
            height: 45px;
        }

        /deep/.el-tabs__active-bar {
            height: 4px;
        }

        // 表格
        .el-table {
            margin-top: 20px;

            /deep/.cell {
                text-align: center;
                height: 50px;
                line-height: 50px;

                img {
                    width: 50px;
                    height: 50px;
                }
            }

            /deep/.el-table__cell {
                padding: 10px 0;
            }
            // 操作的三个按钮
            .el-button {
                width: 26%;
                height: 30px;
                padding: 0;
                text-align: center;
                font-size: 12px;
            }
        }

        // 分页
        /deep/.el-pagination {
            text-align: center;
            margin-top: 20px;
        }
    }

    // 搜索盒子
    #headerBox {
        position: absolute;
        width: 490px;
        right: 1%;
        top: 6%;
        z-index: 999;

        // 查询输入框
        .el-input {
            width: 61.5%;
            float: left;
            /deep/.el-input__inner {
                // border: 1px solid yellow;
                width: 300px;
                height: 35px;
                border-radius: 4px;

                &::placeholder {
                    font-size: 10px;
                }
            }

            /deep/.el-input__icon {
                line-height: 35px;
            }
        }

        // 搜索和新增两个按钮
        .el-button {
            float: left;
            width: 80px;
            height: 35px;
            font-size: 13px;
            text-align: center;
            padding: 0;
            margin-left: 10px;
            border-radius: 5px;
        }

        #serviceSearch {
            width: 60px;
        }
    }

    //详情弹出框
    #serviceDetail {
        /deep/.el-dialog {
            .el-dialog__header {
                padding: 30px 30px 20px;
            }
            .el-dialog__body {
                padding: 10px 20px 30px 20px;
                .el-form-item__label {
                    margin-right: 40px;
                }
                .el-image {
                    margin-top: 15px;
                }
                .el-form-item__content {
                    padding-left: 40px;
                }
            }
        }
    }
}
</style>
